<template>
  <el-container class="index">
    <el-header>
      <el-steps :active=index align-center finish-status="success" >
        <el-button @click="goHome" type="primary" class="button" icon="el-icon-s-home" round>主菜单</el-button>
        <el-step title="步骤1" description="填写表格基本信息" icon="el-icon-s-order"></el-step>
        <el-step title="步骤2" description="上传excel数据" icon="el-icon-s-data"></el-step>
        <el-step title="步骤3" description="上传word模板" icon="el-icon-s-release"></el-step>
      </el-steps>
    </el-header>
    <el-main>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
      <div class="position">
        <el-button @click="pre" class="button1" type="primary" :disabled="disable1">上一步</el-button>
        <el-button @click="next" class="button" type="primary" :disabled="disable2">下一步</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import {getStaticDoc} from "../../network/static"
  export default {
    name: "index",
    data(){
      return{
        index: 0,
        path: ['/table',"/excel","/word"],
        disable1: true,
        disable2: false
      }
    },
    methods: {
      goTable(){
        this.$router.push(""+this.path[this.index])
      },
      next(){
        if(this.$store.state.percent===100||this.index===0||this.$store.state.excel) {
          if(this.index<2) {
            this.index++
            this.$router.push("" + this.path[this.index])
            this.$store.commit("setNext",0)
          }
        }else{
          this.$message.error("请先上传文件，才能进入下一步")
        }
        this.ifDisable()
      },
      pre(){
        if(this.index>0){
          this.index--
        }
        this.ifDisable()
        this.$router.push(""+this.path[this.index])
      },
      goHome(){
        this.$router.push('/')
      },
      ifDisable(){
        if(this.index===0){
          this.disable1=true
          this.disable2=false
        }else if(this.index===2){
          this.disable1=false
          this.disable2=true
        }else{
          this.disable1=false
          this.disable2=false
        }
      }
    },
    created() {
      this.goTable()
    }
  }
</script>

<style scoped>
  .index{
    height: 100%;
    width: 100%;
    background: linear-gradient(165deg,#CCFFFF 30%, #00FFFF,#00CCCC,#0099CC,#0099FF,#0066FF);
  }
  .button{
    margin-top: 1rem;
    height: 100%;
  }
  .position{
    display: flex;
    justify-content: center;
  }
  .button1{
    margin-top: 1rem;
    height: 100%;
    margin-right: 10rem;
  }
</style>